{include file="common/header" /}
    <!--后台顶部-->
    <div class="wrapper-top">
        <!--后台Logo-->
        <div class="wrapper-logo"></div>

        <div class="wrapper-menu-toolbar">
            <!--电脑端头部菜单-->
            <ul class="box-top-menu">
            </ul>

            <ul class="box-top-toolbar">
                <!--        <li id="link_zoom_out"><i class="fa fa-arrows-alt"></i></li>-->
                <li id="link_message"><i class="fa fa-envelope"></i></li>
                <li id="link_profile"><i class="fa fa-user"></i></li>
                <li id="link_real_name">欢迎你，{$login_nickname}!</li>
                <li id="link_logout"><i class="fa fa-power-off"></i>退出</li>
            </ul>

            <!--手机端头部菜单-->
<!--            <ul class="layui-nav layui-layout-left wrapper-top-menu-mobile jy-mobile-show">-->
<!--                <li class="layui-nav-item">-->
<!--                    <a href="javascript:;"><i class="fa fa-list-ul"></i> 选择模块</a>-->
<!--                    <dl class="layui-nav-child layuimini-menu-header-mobile">-->
<!--                    </dl>-->
<!--                </li>-->
<!--            </ul>-->
        </div>
    </div>

    <div class="wrapper-content">
        <!--左侧菜单-->
        <div class="wrapper-side">
            <ul class="box-side-menu"></ul>
        </div>

        <!--工作区域-->
        <div class="wrapper-workspace">
            <div class="wrapper-tab easyui-tabs" ></div>
        </div>
    </div>
<script>
    $(document).ready(function(){
        var tabBox = $(".wrapper-tab");
        var dashboardData = getDashBoardData();
        console.log("dashboard", dashboardData);
        var topMenuList = getTopMenuList(dashboardData);
        console.log("topMenuList", topMenuList);
        renderHeaderContent(dashboardData.menu_list);
        renderLeftSideMenu(dashboardData.menu_list[0].id);

        $(document).on('click', '.top-menu-item', function () {
            var nowItem = $(this);
            var topMenuId = nowItem.data("menuid");
            nowItem.siblings().removeClass("current");
            nowItem.addClass("current");
            console.log("click top menu id:", topMenuId);
            renderLeftSideMenu(topMenuId);
        });

        $(document).on('click', '.side-menu-item', function () {
            var nowItem = $(this);
            var tabTitle = nowItem.data("tab_title");
            if (tabBox.tabs('exists', tabTitle)) {
                console.log('ggggggg');
                tabBox.tabs('select', tabTitle)
            } else {
                console.log("add tab title");
                tabBox.tabs('add', {
                    width: 1000,
                    title: tabTitle,
                    href: nowItem.data("page_path"),
                    iconCls: "fa fa-edit",
                    closable: true,
                    // onClose:function(title, index){
                    //     console.log(title);
                    //     var tab = tabBox.tabs('getTab', index);
                    //     console.log("on close");
                    //     if (tab){
                    //         var iframe = $(tab.panel('options').content);
                    //         iframe.remove();
                    //         tab.panel('destroy');
                    //     }
                    // }
                });
            }
        });

        function getDashBoardData()
        {
            var finalData;
            $.ajax({
                    url: '/api/index/getDashboardData',
                    type: 'post',
                    async: false,
                    data: {},
                    dataType: 'json',
                    success: function (result) {
                        if (1 == result.code) {
                            finalData = result.data;
                        }
                    }
                }
            );
            return finalData;
        }

        function getTopMenuList(dashboardData)
        {
            var topList = {};
            $.each(dashboardData.menu_list, function(index, menuItem){
                topList[menuItem.id] = menuItem;
            });
            return topList;
        }

        function renderHeaderContent(topMenuData)
        {
            var html = '';
            var count = 0;
            var currentClass = "";
            $.each(topMenuData, function (index, item) {
                if(0 == index){
                    currentClass = "current";
                }else{
                    currentClass = ""
                }
                html += '<div class="top-menu-item menu-item ' + currentClass + '" data-menuid="' + item.id + '" id="menu_' + item.id + '" >' + item.menu_name_cn + '</div>';
                count++;
            });
            $(".box-top-menu").html(html);
            renderHeaderLogo();
        }

        function renderLeftSideMenu(topMenuId)
        {
            var html = '';
            $.each(topMenuList[topMenuId].children, function (secondIndex, secondItem) {
                html += '<li class="box-third-menu">';
                html += '<div class="side-menu-item level-second">' + secondItem.menu_name_cn + '</div>';
                if(secondItem.children.length > 0){
                    html += '<dl>';
                    $.each(secondItem.children, function(thirdIndex, thirdItem){
                        html += '<dd class="side-menu-item level-third" data-tab_title="'+ thirdItem.menu_name_cn +'" data-page_path="' + thirdItem.menu_url + '">' + thirdItem.menu_name_cn + '</dd>';
                    });
                    html += '</dl>';
                }
                html += '</li>';
            });
            $(".box-side-menu").html(html);
        }

        function renderHeaderLogo()
        {

        }

        $("#link_logout").click(function () {
            $.ajax({
                url: '/api/AdminUser/logout',
                type: 'post',
                data: {},
                dataType: 'json',
                success: function (resp) {
                    if (1 == resp.code) {
                        window.location.href = "login";
                    } else {
                        layer.msg(resp.msg);
                    }
                }
            });
        });

    });
</script>
{include file="common/footer" /}

